import * as React from 'react';
import { Breadcrumb } from 'antd'
import { useMount } from 'ahooks';
import { useLocation } from 'umi';
interface IMyBreadcrumbProps {
}

const MyBreadcrumb: React.FunctionComponent<IMyBreadcrumbProps> = (props) => {
  const { pathname } = useLocation()
  console.log(pathname)
  const [ title, setTitle ] = React.useState('')
  const [ subTitle, setSubTitle ] = React.useState('')
  const breadcrumbList = {
    '/banner/list': {
      title: '轮播图管理',
      subTitle: '轮播题列表'
    },
    '/pro/list': {
      title: '产品管理',
      subTitle: '产品列表'
    },
    '/pro/recommend': {
      title: '产品管理',
      subTitle: '推荐列表'
    },
    '/pro/seckill': {
      title: '产品管理',
      subTitle: '秒杀列表'
    }
  }
  useMount(() => {
    // 获取地址栏的 pathname
    setTitle(breadcrumbList[pathname].title)
    setSubTitle(breadcrumbList[pathname].subTitle)
  })
  return (
    <Breadcrumb>
      <Breadcrumb.Item>首页</Breadcrumb.Item>
      <Breadcrumb.Item>
        <a href="">{ title }</a>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <a href=""> { subTitle }</a>
      </Breadcrumb.Item>
    </Breadcrumb>
  );
};

export default MyBreadcrumb;
